<template>
  <div>
    <PageTitleSearch
      :title="title"
      :hotelList="hotelList"
      :currentHotel="currentHotel"
      v-model:lastMonth="lastMonth"
      :currentAcc="currentAcc"
      @hotel-change="handleSelectChange"
      @date-change="handleDateSelect"
      @acc-change="handleAccSelect"
    />
    <div class="main-content">
      <a-row :gutter="[12, 12]" style="margin-bottom: 10px">
        <a-col :span="3" style="width: 126px; flex: 0 0 126px">
          <div class="title-name title-bold">餐饮合计</div>
        </a-col>
        <a-col :span="23" style="flex: 1">
          <a-row :gutter="12">
            <a-col :span="6"><div class="title-name title-bold">全日餐厅</div></a-col>
            <a-col :span="6">
              <div class="title-name title-bold">中餐厅</div>
            </a-col>
            <a-col :span="6"><div class="title-name title-bold">特色餐厅</div></a-col>
            <a-col :span="6"><div class="title-name title-bold">宴会厅</div></a-col>
          </a-row>
        </a-col>
      </a-row>
      <a-row :gutter="[12, 12]" style="margin-bottom: 10px">
        <a-col :span="3" style="width: 126px; flex: 0 0 126px; height: 240px">
          <div class="card-wrap">
            <div class="card-title">餐饮收入</div>
            <div class="card-title">{{ incomeInfo.actual }}</div>
            <!-- <span>较预算：{{ profitInfo.budgetDiff }}, </span> -->
            <div class="card-unit">单位：万元</div>
            <div class="card-detail">
              <div>预算 </div>
              <div>{{ incomeInfo.budget }}</div>
              <div class="card-num">
                <svg width="10" height="10">
                  <polygon :points="getTrianglePoint(incomeInfo.budgetDiff > 0)" :style="{ fill: getColor(incomeInfo.budgetDiff > 0) }" />
                </svg>
                <span
                  :style="{
                    color: getColor(incomeInfo.budgetDiff > 0),
                  }"
                >
                  {{ incomeInfo.budgetDiffPercent }}</span
                >
              </div>
              <div>去年</div>
              <div>{{ incomeInfo.lastYearDiff }}</div>
              <div class="card-num">
                <svg width="10" height="10">
                  <polygon
                    :points="getTrianglePoint(incomeInfo.lastYearDiff > 0)"
                    :style="{
                      fill: getColor(incomeInfo.lastYearDiff > 0),
                    }"
                  />
                </svg>
                <span
                  :style="{
                    color: getColor(incomeInfo.lastYearDiff > 0),
                  }"
                >
                  {{ incomeInfo.lastYearDiffPercent }}</span
                >
              </div>
            </div>
          </div>
        </a-col>
        <a-col :span="23" style="flex: 1; height: 240px">
          <a-row :gutter="12" style="height: 100%">
            <a-col :span="6" style="height: 100%">
              <FlexCard class="custom-card" :loading="loading" :dataList="adIncomeData">
                <BarSingleImg
                  v-if="adIncomeData && adIncomeData.length > 0"
                  :dataList="adIncomeData"
                  formatter="dot2Formatter|0"
                  :showComment="true"
                  :barWidth="30"
                  height="220px"
                />
              </FlexCard>
            </a-col>
            <a-col :span="6" style="height: 100%">
              <FlexCard class="custom-card" :loading="loading" :dataList="cnIncomeData">
                <BarSingleImg
                  v-if="cnIncomeData && cnIncomeData.length > 0"
                  :dataList="cnIncomeData"
                  formatter="dot2Formatter|0"
                  :showComment="true"
                  :barWidth="30"
                  height="220px"
                />
              </FlexCard>
            </a-col>
            <a-col :span="6" style="height: 100%">
              <FlexCard class="custom-card" :loading="loading" :dataList="spIncomeData">
                <BarSingleImg
                  v-if="spIncomeData && spIncomeData.length > 0"
                  :dataList="spIncomeData"
                  formatter="dot2Formatter|0"
                  :showComment="true"
                  :barWidth="30"
                  height="220px"
                />
              </FlexCard>
            </a-col>
            <a-col :span="6" style="height: 100%">
              <FlexCard class="custom-card" :loading="loading" :dataList="baIncomeData">
                <BarSingleImg
                  v-if="baIncomeData && baIncomeData.length > 0"
                  :dataList="baIncomeData"
                  formatter="dot2Formatter|0"
                  :showComment="true"
                  :barWidth="30"
                  height="220px"
                />
              </FlexCard>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
      <a-row :gutter="[12, 12]" style="margin-bottom: 10px">
        <a-col :span="3" style="width: 126px; flex: 0 0 126px; height: 240px">
          <div class="card-wrap">
            <div class="card-title">经营利润</div>
            <div class="card-title">{{ profitInfo.actual }}</div>
            <div class="card-unit">单位：万元</div>
            <div class="card-detail">
              <div>预算 </div>
              <div>{{ profitInfo.budget }}</div>
              <!-- <span>较预算：{{ profitInfo.budgetDiff }}, </span> -->
              <div class="card-num">
                <svg width="10" height="10">
                  <polygon :points="getTrianglePoint(profitInfo.budgetDiff > 0)" :style="{ fill: getColor(profitInfo.budgetDiff > 0) }" />
                </svg>
                <span
                  :style="{
                    color: getColor(profitInfo.budgetDiff > 0),
                  }"
                >
                  {{ profitInfo.budgetDiffPercent }}</span
                >
              </div>
              <div>去年</div>
              <div>{{ profitInfo.lastYearDiff }}</div>
              <div class="card-num">
                <svg width="10" height="10">
                  <polygon
                    :points="getTrianglePoint(profitInfo.lastYearDiff > 0)"
                    :style="{
                      fill: getColor(profitInfo.lastYearDiff > 0),
                    }"
                  />
                </svg>
                <span
                  :style="{
                    color: getColor(profitInfo.lastYearDiff > 0),
                  }"
                >
                  {{ profitInfo.lastYearDiffPercent }}</span
                >
              </div>
            </div>
          </div>
        </a-col>
        <a-col :span="23" style="flex: 1; height: 240px">
          <a-row :gutter="12" style="height: 100%">
            <a-col :span="6" style="height: 100%">
              <FlexCard class="custom-card" :loading="loading" :dataList="adIncomeData">
                <BarSingleImg
                  v-if="adIncomeData && adIncomeData.length > 0"
                  :dataList="adIncomeData"
                  formatter="dot2Formatter|0"
                  :showComment="true"
                  :barWidth="30"
                  height="220px"
                />
              </FlexCard>
            </a-col>
            <a-col :span="6" style="height: 100%">
              <FlexCard class="custom-card" :loading="loading" :dataList="cnIncomeData">
                <BarSingleImg
                  v-if="cnIncomeData && cnIncomeData.length > 0"
                  :dataList="cnIncomeData"
                  formatter="dot2Formatter|0"
                  :showComment="true"
                  :barWidth="30"
                  height="220px"
                />
              </FlexCard>
            </a-col>
            <a-col :span="6" style="height: 100%">
              <FlexCard class="custom-card" :loading="loading" :dataList="spIncomeData">
                <BarSingleImg
                  v-if="spIncomeData && spIncomeData.length > 0"
                  :dataList="spIncomeData"
                  formatter="dot2Formatter|0"
                  :showComment="true"
                  :barWidth="30"
                  height="220px"
                />
              </FlexCard>
            </a-col>
            <a-col :span="6" style="height: 100%">
              <FlexCard class="custom-card" :loading="loading" :dataList="baIncomeData">
                <BarSingleImg
                  v-if="baIncomeData && baIncomeData.length > 0"
                  :dataList="baIncomeData"
                  formatter="dot2Formatter|0"
                  :showComment="true"
                  :barWidth="30"
                  height="220px"
                />
              </FlexCard>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
      <a-row :gutter="[12, 12]" style="margin-bottom: 10px">
        <a-col :span="3" style="width: 126px; flex: 0 0 126px; height: 240px">
          <div class="card-wrap">
            <div class="card-title">餐厅利润率</div>
            <!-- <div class="card-title">{{ gopRateInfo.actual }}</div> -->
            <div class="card-unit" style="visibility: hidden">单位：万元</div>
            <div class="card-detail">
              <div>预算 </div>
              <!-- <div>{{ gopRateInfo.actual }}</div> -->
              <!-- <span>较预算：{{ gopRateInfo.budgetDiff }}, </span> -->
              <div class="card-num">
                <svg width="10" height="10">
                  <polygon :points="getTrianglePoint(gopRateInfo.actual > 0)" :style="{ fill: getColor(gopRateInfo.actual > 0) }" />
                </svg>
                <span
                  :style="{
                    color: getColor(gopRateInfo.actual > 0),
                  }"
                >
                  {{ gopRateInfo.actual }}</span
                >
              </div>
              <div>去年</div>
              <!-- <div>{{ gopRateInfo.lactual }}</div> -->
              <div class="card-num">
                <svg width="10" height="10">
                  <polygon
                    :points="getTrianglePoint(gopRateInfo.lactual > 0)"
                    :style="{
                      fill: getColor(gopRateInfo.lactual > 0),
                    }"
                  />
                </svg>
                <span
                  :style="{
                    color: getColor(gopRateInfo.lactual > 0),
                  }"
                >
                  {{ gopRateInfo.lactual }}</span
                >
              </div>
            </div>
          </div>
        </a-col>
        <a-col :span="23" style="flex: 1; height: 240px">
          <a-row :gutter="12" style="height: 100%">
            <a-col :span="6" style="height: 100%">
              <FlexCard class="custom-card" :loading="loading" :dataList="adRentRateData">
                <RingImg v-if="adRentRateData && adRentRateData.length > 0" :dataList="adRentRateData" />
              </FlexCard>
            </a-col>
            <a-col :span="6" style="height: 100%">
              <FlexCard class="custom-card" :loading="loading" :dataList="cnRentRateData">
                <RingImg v-if="cnRentRateData && cnRentRateData.length > 0" :dataList="cnRentRateData" />
              </FlexCard>
            </a-col>
            <a-col :span="6" style="height: 100%">
              <FlexCard class="custom-card" :loading="loading" :dataList="spRentRateData">
                <RingImg v-if="spRentRateData && spRentRateData.length > 0" :dataList="spRentRateData" />
              </FlexCard>
            </a-col>
            <a-col :span="6" style="height: 100%">
              <FlexCard class="custom-card" :loading="loading" :dataList="baRentRateData">
                <RingImg v-if="baRentRateData && baRentRateData.length > 0" :dataList="baRentRateData" />
              </FlexCard>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
      <!-- <a-row style="margin-bottom: 10px">
        <a-col :span="8">
          <FlexCard class="flex-height" :loading="loading" title="餐饮合计-收入">
            <BarSingleImg v-if="incomeData.length > 0" :dataList="incomeData" unit="万元" />
          </FlexCard>
        </a-col>
        <a-col :span="8">
          <FlexCard class="flex-height" :loading="loading" title="餐饮合计-经营利润">
            <BarSingleImg v-if="profitData.length > 0" :dataList="profitData" unit="万元" />
          </FlexCard>
        </a-col>
        <a-col :span="8">
          <FlexCard class="flex-height" title="利润率" :loading="loading">
            <RingImg v-if="gopRateData.length > 0" :dataList="gopRateData" />
          </FlexCard>
        </a-col>
      </a-row> -->
      <!-- <a-row>
        <a-col :span="24">
          <FlexCard>
            <TableCard :customRow="customRowHandler" :dataList="tableList" :columns="dataColumns" :scroll="tableWidth" :loading="loading" />
          </FlexCard>
        </a-col>
      </a-row> -->
      <ReportRemarkCard class="remark-height" :loading="loading" v-if="reportCode" title="说明" :reportCode="reportCode" :reportName="reportName" />
    </div>
  </div>
</template>
<script>
  import dayjs from 'dayjs';
  import { defHttp } from '/@/utils/http/axios';
  import * as Color from '/@/utils/ColorDefault';
  import * as MathUtil from '/@/utils/MathUtil';
  import * as Constant from '/@/utils/Constant';
  import FlexCard from '@/views/applications/ui/FlexCard.vue';
  import ReportRemarkCard from '@/views/applications/ui/ReportRemarkCard.vue';
  import BarSingleImg from '@/views/applications/ui/BarSingleImg.vue';
  import RingImg from '@/views/applications/ui/RingImg.vue';
  // import TableCard from '@/views/applications/ui/TableCard.vue';
  import PageTitleSearch from '@/views/applications/ui/PageTitleSearch.vue';
  import { Row as ARow, Col as ACol } from 'ant-design-vue';

  const REPORT_NAME = '酒店月度餐饮概况（项目）';
  const REPORT_CODE = 'hotel-month-single-rest';
  const APIS = {
    month: 'getHotelMonthReportRest',
    year: 'getHotelMonthReportAccRest',
  };
  const DROOM_APIS = {
    month: 'getHotelMonthReportRestDroom',
    year: 'getHotelMonthReportAccRestDroom',
  };

  export default {
    name: REPORT_NAME,

    components: {
      FlexCard,
      ReportRemarkCard,
      BarSingleImg,
      RingImg,
      // TableCard,
      PageTitleSearch,
      ARow,
      ACol,
    },

    data() {
      return {
        title: '餐饮部分-餐饮概况',
        reportCode: '',
        reportName: '',
        loading: false,
        tableWidth: { x: 870, y: '100%' },
        lastMonth: dayjs().subtract(1, 'month').format('YYYYMM'),
        hotelList: [],
        accList: [
          { label: '当月', value: 'month' },
          { label: '当年', value: 'year' },
        ],
        currentHotel: {
          code: '',
          name: '',
        },
        currentAcc: 'month',
        incomeInfo: {
          actual: '',
          budget: '',
          budgetDiff: '',
          budgetDiffPercent: '',
          lastYearDiff: '',
          lastYearDiffPercent: '',
        },
        profitInfo: {
          actual: '',
          budget: '',
          budgetDiff: '',
          budgetDiffPercent: '',
          lastYearDiff: '',
          lastYearDiffPercent: '',
        },
        gopRateInfo: {
          actual: '',
          lactual: '',
          budget: '',
        },
        incomeData: [],
        profitData: [],
        gopRateData: [],
        tableList: [],
        dataColumns: [
          {
            title: '实际',
            dataIndex: 'subjectName',
            width: 130,
            align: 'left',
            ellipsis: true,
            fixed: 'left',
          },
          {
            title: '收入',
            dataIndex: 'income',
            key: 'income',
            width: 80,
            align: 'right',
            customRender: ({ text }) => MathUtil.currencyWNFormatter(text, 0),
          },
          {
            title: '经营利润',
            dataIndex: 'profit',
            key: 'profit',
            width: 80,
            align: 'right',
            customRender: ({ text }) => MathUtil.currencyWNFormatter(text, 0),
          },
          {
            title: '利润率',
            dataIndex: 'profitRate',
            key: 'profitRate',
            width: 80,
            align: 'right',
            customRender: ({ text }) => MathUtil.percent2DFormatter(text, 0),
          },
          {
            title: '用餐人数',
            dataIndex: 'dinner',
            key: 'dinner',
            width: 80,
            align: 'right',
            customRender: ({ text }) => MathUtil.dot2Formatter(text, 0),
          },
          {
            title: '食品人均消费',
            dataIndex: 'perIncome',
            key: 'foodPer',
            width: 100,
            align: 'right',
            customRender: ({ text }) => MathUtil.dot2Formatter(text, 0),
          },
          {
            title: '食品人均成本',
            dataIndex: 'perCost',
            key: 'perCost',
            width: 100,
            align: 'right',
            customRender: ({ text }) => MathUtil.dot2Formatter(text, 0),
          },
          {
            title: '食品成本率',
            dataIndex: 'costRate',
            key: 'costRate',
            width: 90,
            align: 'right',
            customRender: ({ text }) => MathUtil.percent2DFormatter(text, 0),
          },
        ],
        adIncomeData: [],
        cnIncomeData: [],
        spIncomeData: [],
        baIncomeData: [],
        otherIncomeData: [],

        adProfitData: [],
        cnProfitData: [],
        spProfitData: [],
        baProfitData: [],
        otherProfitData: [],

        adRentRateData: [],
        cnRentRateData: [],
        spRentRateData: [],
        baRentRateData: [],
        otherRentRateData: [],
      };
    },

    created() {
      defHttp.get({ url: '/data/hotel/list' }, { isTransformResponse: false }).then((res) => {
        if (res.success && res.result.length > 0) {
          const dataList = res.result;
          this.hotelList = dataList.map((s) => ({
            label: s.name,
            value: s.code,
          }));
          const currentHotelCode = this.$route.query.hotelCode || localStorage.getItem(Constant.STORAGE_HOTEL_NAME);
          if (currentHotelCode && dataList.filter((d) => d.code === currentHotelCode).length > 0) {
            this.currentHotel = dataList.filter((d) => d.code === currentHotelCode)[0];
          } else {
            this.currentHotel = {
              code: dataList[0].code,
              name: dataList[0].name,
            };
          }
          const accName = this.accList.filter((a) => a.value === this.currentAcc)[0].label;
          this.reportCode = `${REPORT_CODE}-${this.currentAcc}-${this.currentHotel.code}-${this.lastMonth}`;
          this.reportName = `${REPORT_NAME}-${accName}-${this.currentHotel.name}-${this.lastMonth}`;
          this.fetchData();
        }
      });
    },

    methods: {
      handleDateSelect(date) {
        this.lastMonth = date;
        const accName = this.accList.find((a) => a.value === this.currentAcc).label;
        this.reportCode = `${REPORT_CODE}-${this.currentAcc}-${this.currentHotel.code}-${this.lastMonth}`;
        this.reportName = `${REPORT_NAME}-${accName}-${this.currentHotel.name}-${this.lastMonth}`;
        this.fetchData();
      },

      handleAccSelect(value) {
        this.currentAcc = value;
        const accName = this.accList.find((a) => a.value === value).label;
        this.reportCode = `${REPORT_CODE}-${value}-${this.currentHotel.code}-${this.lastMonth}`;
        this.reportName = `${REPORT_NAME}-${accName}-${this.currentHotel.name}-${this.lastMonth}`;
        this.fetchData();
      },

      handleSelectChange(value) {
        this.currentHotel = {
          code: value,
          name: this.hotelList.find((h) => h.value === value).label,
        };
        this.fetchData();
      },

      fetchData() {
        this.loading = true;
        Promise.all([
          defHttp.post({
            url: 'data/query',
            data: {
              labelCode: APIS[this.currentAcc],
              sqlParams: [
                {
                  key: 'code',
                  value: this.currentHotel.code,
                },
                {
                  key: 'month',
                  value: this.lastMonth,
                },
              ],
              pageIndex: 1,
              pageSize: 100,
            },
          }),
          defHttp.post({
            url: 'data/query',
            data: {
              labelCode: DROOM_APIS[this.currentAcc],
              sqlParams: [
                {
                  key: 'code',
                  value: this.currentHotel.code,
                },
                {
                  key: 'month',
                  value: this.lastMonth,
                },
              ],
              pageIndex: 1,
              pageSize: 100,
            },
          }),
        ]).then(([totalRes, detailRes]) => {
          if (totalRes.datas.success && totalRes.datas.data.length > 0) {
            const data = totalRes.datas.data[0];
            const dataList = detailRes.datas.data || [];
            dataList &&
              dataList.forEach((item) => {
                item.incomeBudget = Math.floor(Math.random() * 40001) + 10000;
                item.lIncome = Math.floor(Math.random() * 40001) + 10000;
                item.profitBudget = Math.floor(Math.random() * 40001) + 10000;
                item.lProfit = Math.floor(Math.random() * 40001) + 10000;
              });
            this.incomeInfo = {
              actual: MathUtil.currencyWNFormatter(data.income, 0),
              budget: MathUtil.currencyWNFormatter(data.incomeBudget, 0),
              budgetDiff: MathUtil.currencyWNFormatter(data.income - data.incomeBudget, 0),
              budgetDiffPercent: MathUtil.diffPercent2Formatter(data.income, data.incomeBudget, 1),
              lastYearDiff: MathUtil.currencyWNFormatter(data.income - data.lIncome, 0),
              lastYearDiffPercent: MathUtil.diffPercent2Formatter(data.income, data.lIncome, 1),
            };
            this.profitInfo = {
              actual: MathUtil.currencyWNFormatter(data.profit, 0),
              budget: MathUtil.currencyWNFormatter(data.profit, 0),
              budgetDiff: MathUtil.currencyWNFormatter(data.profit - data.profitBudget, 0),
              budgetDiffPercent: MathUtil.diffPercent2Formatter(data.profit, data.profitBudget, 1),
              lastYearDiff: MathUtil.currencyWNFormatter(data.profit - data.lProfit, 0),
              lastYearDiffPercent: MathUtil.diffPercent2Formatter(data.profit, data.lProfit, 1),
            };
            this.incomeData = [
              {
                name: this.currentAcc === 'month' ? '实际' : '年累计',
                value: data.income,
                color: Color.COLOR_BLUE,
              },
              {
                name: '预算',
                value: data.incomeBudget,
                color: Color.COLOR_PURPLE,
              },
              {
                name: '去年',
                value: data.lIncome,
                color: Color.COLOR_WARN,
              },
            ];
            this.profitData = [
              {
                name: this.currentAcc === 'month' ? '实际' : '年累计',
                value: data.profit,
                color: Color.COLOR_BLUE,
              },
              {
                name: '预算',
                value: data.profitBudget,
                color: Color.COLOR_PURPLE,
              },
              {
                name: '去年',
                value: data.lProfit,
                color: Color.COLOR_WARN,
              },
            ];
            this.gopRateData = [
              {
                name: '去年',
                value: MathUtil.safeDivide(data.lProfit, data.lIncome),
                color: Color.COLOR_WARN,
              },
              {
                name: '预算',
                value: MathUtil.safeDivide(data.profitBudget, data.incomeBudget),
                color: Color.COLOR_PURPLE,
              },
              {
                name: this.currentAcc === 'month' ? '实际' : '年累计',
                value: MathUtil.safeDivide(data.profit, data.income),
                color: Color.COLOR_BLUE,
              },
            ];
            this.gopRateInfo = {
              actual: MathUtil.percent2DFormatter(this.gopRateData[2].value, 2),
              budget: MathUtil.percent2DFormatter(this.gopRateData[1].value, 2),
              lactual: MathUtil.percent2DFormatter(this.gopRateData[0].value, 2),
            };
            // 收入数据
            const adRestaurant = this.getDataByName(dataList, '全日餐厅');
            const cnRestaurant = this.getDataByName(dataList, '中餐厅');
            const spRestaurant = this.getDataByName(dataList, '特色餐厅');
            const baRestaurant = this.getDataByName(dataList, '宴会');
            console.log('baRestaurant222222', baRestaurant);

            const otherRestaurant = this.getDataByName(dataList, '其它');
            // 收入数据
            this.adIncomeData = this.formatChartIncomeData(adRestaurant);
            this.cnIncomeData = this.formatChartIncomeData(cnRestaurant);
            this.baIncomeData = this.formatChartIncomeData(adRestaurant);
            this.spIncomeData = this.formatChartIncomeData(spRestaurant);
            this.otherIncomeData = this.formatChartIncomeData(otherRestaurant);
            // 设置经营利润数据
            this.adProfitData = this.formatChartProfitData(adRestaurant);
            this.cnProfitData = this.formatChartProfitData(cnRestaurant);
            this.spProfitData = this.formatChartProfitData(spRestaurant);
            this.baProfitData = this.formatChartProfitData(baRestaurant);
            this.otherProfitData = this.formatChartProfitData(otherRestaurant);
            // 设置利润率数据
            this.adRentRateData = this.formatRateData(adRestaurant, adRestaurant);
            this.cnRentRateData = this.formatRateData(cnRestaurant, cnRestaurant);
            this.spRentRateData = this.formatRateData(spRestaurant, spRestaurant);
            this.baRentRateData = this.formatRateData(baRestaurant, baRestaurant);
            this.otherRentRateData = this.formatRateData(otherRestaurant, otherRestaurant);
          } else {
            this.incomeInfo = '';
            this.profitInfo = '';
            this.gopRateInfo = '';
            this.incomeData = [];
            this.profitData = [];
            this.gopRateData = [];

            this.adIncomeData = [];
            this.cnIncomeData = [];
            this.spIncomeData = [];
            this.baIncomeData = [];
            this.otherIncomeData = [];

            this.adProfitData = [];
            this.cnProfitData = [];
            this.spProfitData = [];
            this.baProfitData = [];
            this.otherProfitData = [];

            this.adRentRateData = [];
            this.cnRentRateData = [];
            this.spRentRateData = [];
            this.baRentRateData = [];
            this.otherRentRateData = [];
          }
          if (detailRes.datas.success && detailRes.datas.data.length > 0) {
            const dataList = detailRes.datas.data;
            const detailRest = dataList.filter((d) => d.subjectName !== '宴会（含婚宴）');
            const sumDetail = detailRest.reduce(
              (acc, item) => ({
                income: acc.income + item.income,
                profit: acc.profit + item.profit,
                dinner: acc.dinner + item.dinner,
                foodIncome: acc.foodIncome + item.foodIncome,
                foodCost: acc.foodCost + item.foodCost,
              }),
              { income: 0, profit: 0, dinner: 0, foodIncome: 0, foodCost: 0 }
            );
            const sumDroom = {
              subjectName: '餐厅小计',
              ...sumDetail,
            };
            const baRest = dataList.filter((d) => d.subjectName === '宴会（含婚宴）');
            const sumRest = {
              subjectName: '餐饮小计',
              income: sumDroom.income + baRest[0].income,
              profit: sumDroom.profit + baRest[0].profit,
              dinner: sumDroom.dinner + baRest[0].dinner,
              foodIncome: sumDroom.foodIncome + baRest[0].foodIncome,
              foodCost: sumDroom.foodCost + baRest[0].foodCost,
            };
            this.tableList = [...detailRest, sumDroom, ...baRest, sumRest].map((d) => this.wrapData(d));
          } else {
            this.tableList = [];
          }
          localStorage.setItem(Constant.STORAGE_HOTEL_NAME, this.currentHotel.code);
          this.loading = false;
        });
      },
      wrapData(d) {
        return {
          ...d,
          profitRate: MathUtil.safeDivide(d.profit, d.income),
          perIncome: MathUtil.safeDivide(d.foodIncome, d.dinner),
          perCost: MathUtil.safeDivide(d.foodCost, d.dinner),
          costRate: MathUtil.safeDivide(d.foodCost, d.foodIncome),
        };
      },
      clearAllData() {
        this.incomeData = [];
        this.profitData = [];
        this.gopRateData = [];
        this.tableList = [];
        this.incomeInfo = null;
        this.profitInfo = null;
      },

      getDataByCode(dataList, code) {
        return (
          dataList.find((item) => item.subjectCode === code) || {
            actual: 0,
            budget: 0,
            lActual: 0,
          }
        );
      },
      getDataByName(dataList, name) {
        return (
          dataList.find((item) => item.subjectName.includes(name)) || {
            actual: 0,
            budget: 0,
            lActual: 0,
          }
        );
      },

      formatChartIncomeData(data) {
        // 收入
        return [
          {
            name: this.currentAcc === 'month' ? '实际' : '年累计',
            value: MathUtil.currencyWNDFormatter(data.income, 2),
            color: Color.COLOR_BLUE,
          },
          {
            name: '预算',
            value: MathUtil.currencyWNDFormatter(data.incomeBudget, 2),
            color: Color.COLOR_PURPLE,
          },
          {
            name: '去年',
            value: MathUtil.currencyWNDFormatter(data.lIncome, 2),
            color: Color.COLOR_WARN,
          },
        ];
      },
      formatChartProfitData(data) {
        // 利润
        return [
          {
            name: this.currentAcc === 'month' ? '实际' : '年累计',
            value: MathUtil.currencyWNDFormatter(data.profit, 2),
            color: Color.COLOR_BLUE,
          },
          {
            name: '预算',
            value: MathUtil.currencyWNDFormatter(data.profitBudget, 2),
            color: Color.COLOR_PURPLE,
          },
          {
            name: '去年',
            value: MathUtil.currencyWNDFormatter(data.lProfit, 2),
            color: Color.COLOR_WARN,
          },
        ];
      },

      formatRateData(profitData, incomeData) {
        return [
          {
            name: '去年',
            value: MathUtil.safeDivide(profitData.lProfit, incomeData.lIncome),
            color: Color.COLOR_WARN,
            radius: ['70%', '85%'], // 最外圈 - 去年
          },
          {
            name: '预算',
            value: MathUtil.safeDivide(profitData.profitBudget, incomeData.incomeBudget),
            color: Color.COLOR_PURPLE,
            radius: ['55%', '70%'], // 中间圈 - 预算
          },
          {
            name: this.currentAcc === 'month' ? '实际' : '年累计',
            value: MathUtil.safeDivide(profitData.profit, incomeData.income),
            color: Color.COLOR_BLUE,
            radius: ['40%', '55%'], // 最内圈 - 实际
          },
        ];
      },

      formatTableData(dataList) {
        return dataList.map((item) => ({
          name: item.subjectName,
          actual: item.actual,
          budget: item.budget,
          lActual: item.lActual,
          profitActual: item.profitActual,
          profitBudget: item.profitBudget,
          profitLActual: item.profitLActual,
        }));
      },

      formatInfoData(data) {
        if (!data) return null;
        const budgetDiff = data.actual - data.budget;
        const lastYearDiff = data.actual - data.lActual;
        return {
          actual: MathUtil.currencyWNDFormatter(data.actual, 2),
          budgetDiff: MathUtil.currencyWNDFormatter(budgetDiff, 2),
          budgetDiffPercent: MathUtil.percentFormatter(MathUtil.safeDivide(budgetDiff, Math.abs(data.budget))),
          lastYearDiff: MathUtil.currencyWNDFormatter(lastYearDiff, 2),
          lastYearDiffPercent: MathUtil.percentFormatter(MathUtil.safeDivide(lastYearDiff, Math.abs(data.lActual))),
        };
      },

      getTrianglePoint(isUp) {
        return isUp ? '5,0 0,10 10,10' : '0,0 10,0 5,10';
      },

      getColor(rise = true) {
        return rise ? Color.COLOR_GREEN : Color.COLOR_RED;
      },

      customRowHandler(record, index) {
        const style = {};
        // 如果当前行的 key 与存储的 specialRowKey 相同，则添加特殊背景颜色
        if (record.subjectName && record.subjectName.includes('小计')) {
          style.backgroundColor = Color.COLOR_LIGHT_BLUE;
        }
        return {
          // 为行添加鼠标移入事件
          onMouseenter: () => {
            console.log(`Mouse entered row with index ${index}`);
          },
          // 为行添加鼠标移出事件
          onMouseleave: () => {
            console.log(`Mouse left row with index ${index}`);
          },
          // 为行添加点击事件
          onClick: () => {
            console.log(`Clicked on row with index ${index}`);
          },
          // 为行添加样式
          style: style,
        };
      },
    },
  };
</script>

<style lang="less" scoped>
  .main-content {
    padding: 12px 0;

    &-title {
      &-custom {
        color: #00b578;
      }
    }
  }
  .title-name {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    background: #ffffff;
    box-shadow: 0px 5px 5px 0px rgba(25, 15, 15, 0.07);
    border-radius: 0.5rem;
    text-align: center;
    font-size: 16px;
  }
  .title-bold {
    font-weight: 600;
  }

  .vercial-mode {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 8px;
  }

  .card-wrap {
    height: 100%;
    padding: 10px;
    background: #ffffff;
    box-shadow: 0px 5px 5px 0px rgba(25, 15, 15, 0.07);
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
  }

  .card-point {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
  }
  .card-remark {
    font-size: 12px;
    text-align: right;
  }
  .card-title {
    font-size: 16px;
    font-weight: 600;
  }
  .card-unit {
    font-size: 14px;
    margin-bottom: auto;
  }
  .card-detail {
    padding: 5px;
    background: #f7f5f4;
    border-radius: 0.5rem;
    margin-top: 10px;
  }
  .card-num {
    display: flex;
    align-items: center;
  }

  .custom-card {
    height: 100%;
    :deep(.ant-card-body) {
      height: 100%;
    }
  }

  @media @desktop {
    .echarts {
      width: 100%;
      height: 400px;
    }
    .flex-height {
      height: 240px;
    }
    .unline {
      text-decoration: underline;
    }
    .card-intitle {
      font-size: 14px;
      font-weight: 600;
      text-align: center;
    }
    .card-top {
      text-align: center;
      margin-bottom: 12px;
    }
    .card-flex {
      display: flex;
      justify-content: space-between;
      gap: 20px;
    }
    .card-left {
      display: flex;
      justify-content: space-between;
      gap: 4px;
    }
    .card-img {
      padding: 12px;
      border-radius: 10px;
      background-color: #f7f5f4;
    }
    .dash-line {
      border-left: 1px dashed #d9d9d9;
    }
    .remark-height {
      height: auto;
    }
  }
</style>
